<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<!DOCTYPE html>

<html>

<head>
<meta charset="utf-8">
<script type="text/javascript"
	src="${pageContext.request.contextPath}/js/common/jquery-1.9.1.min.js"></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath }/ueditor/ueditor.parse.js"></script>
<link href="${pageContext.request.contextPath}/css/common/page.css"
	rel="stylesheet">

<title></title>
</head>
<style>
.content {
	display: none
}

.invalid {
	cursor: default;
	color: rgb(166, 166, 166) !important;
}
</style>
<body>

	<div id="content">
		<c:forEach begin="0" end="${fn:length(contents)-1 }" var="item">
			<c:set value="${item}" var="content" />
			<div class="content">${contents[content] }</div>
		</c:forEach>

	</div>
	<!--分页-->
	<div class="paging">
		<div style="display: none;">
			<span class="length">${fn:length(contents) }</span>
		</div>
		<div class="showPaging">
			<a class="prev" href="javascript:;"> 上一页</a> <select class="pageNum">
				<option value="0">第1页</option>
			</select> <a class="next" href="javascript:;"> 下一页</a>
		</div>
	</div>

	<!--分页结束-->
</body>
<script>
	$(document).ready(
			function() {
				var selectedPageNum = $(".pageNum").val(); //选中页码
				var pages = $(".length").text(); //页数
				$(".prev").removeAttr('href');
				$(".prev").addClass('invalid');
				if (pages == 1) {
					$(".prev,.next").addClass('invalid');
					$(".prev,.next").removeAttr('href');
				}
				for (var i = 1; i < pages;i++) {
					var result = "";
					result += "<option" + " value=" + "'" + i + "'" + " >"
							+ "第" + (i + 1) + "页" + "</option>";
					$(".pageNum").append(result);
				}
				$(".pageNum").change(function() {
					var changePageNum = $(".pageNum").val(); //选中页码
					if (changePageNum == 0) {
						$(".prev").removeAttr('href');
						$(".prev").addClass('invalid');
					} else {
						$(".prev").attr("href", "javaScript:;");
						$(".prev").removeClass('invalid');
					}
					if (changePageNum == pages-1) {
						$(".next").removeAttr('href');
						$(".next").addClass('invalid');
					} else {
						$(".next").attr("href", "javaScript:;");
						$(".next").removeClass('invalid');
					}
					$(".content").each(function(index) {
						if (index == changePageNum) {
							$(".content").eq(index).show();
						} else {
							$(".content").eq(index).hide();
						}
					})
					selectedPageNum=changePageNum;
				})
				$(".content").each(function(index) {
					if (index == selectedPageNum) {
						$(".content").eq(index).show();
					} else {
						$(".content").eq(index).hide();
					}
				})
				$(".prev").click(function() {
					selectedPageNum--;
					$(".pageNum").val(selectedPageNum);  //改变选中的页码
					$(".content").each(function(index) {
						if (index == selectedPageNum) {
							$(".content").eq(index).show();
						} else {
							$(".content").eq(index).hide();
						}
					})
					if (0 == selectedPageNum) {
						$(".prev").removeAttr('href');
						$(".prev").addClass('invalid');
					} else {
						$(".prev").attr("href", "javaScript:;");
						$(".prev").removeClass('invalid');
					}
					$(".next").attr("href", "javaScript:;");
					$(".next").removeClass('invalid');
				})
				$(".next").click(function() {
					selectedPageNum++;
					$(".pageNum").val(selectedPageNum);  //改变选中的页码
					$(".content").each(function(index) {
						if (index == selectedPageNum) {
							$(".content").eq(index).show();
						} else {
							$(".content").eq(index).hide();
						}
						if (index == (pages-1)) {
							$(".next").removeAttr('href');
							$(".next").addClass('invalid');
						} else {
							$(".next").attr("href", "javaScript:;");
							$(".next").removeClass('invalid');
						}
					})
					$(".prev").attr("href", "javaScript:;");
					$(".prev").removeClass('invalid');
				})

			})
</script>
</html>